<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style></style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <p>
            <input type="text" placeholder="请输入" v-focus v-border>
        </p>
        <p v-border >
            wh2114-daydayup
        </p>
        <h2 v-demo v-bg-color >Hello world </h2>
        <h2 v-my-show="show">自定义 v-show</h2>
        <button @click="show=!show">点击切换show</button>
        <h2 v-my-demo:click.stop.once='todo' v-my-color="color" >wh2114 - 晚上看电影 </h2>
        <button v-my-on:click.stop.once="todosome">点击-todosome</button>
    </div>

    <script>
        // 全局注册指令
        Vue.directive("focus",{  // 指令名称
            inserted(el){  // el 需要操作的DOM 
                el.focus()
                el.style.color="red"
            }
        })

        Vue.directive("Demo",{
            bind(el){
                console.log('bind')
                el.innerHTML += "DEmo - Demo  - Demo "
            },
            inserted(el){
                console.log('inserted')
                el.style.fontSize = "10px"
            },
            update(el){
                console.log('update')
            },
            unbind(el){
                console.log("unbind")
            }
        })

        Vue.directive("bgColor",{
            bind(el){
                el.style.backgroundColor = "pink"
            }
        })
        Vue.directive("myShow",{
            // inserted(el,binding){
            //     el.style.display = binding.value?'block':'none'
            // },
            update(el,binding){
                el.style.display = binding.value?'block':'none'
            }
        })
        Vue.directive("myDemo",{
            bind(el,binding){
                console.log(binding)
                var s = JSON.stringify;
                el.innerHTML =
                'name 指令名: '       + s(binding.name) + '<br>' +
                'value 指令值: '      + s(binding.value) + '<br>' +
                'expression 表达式: ' + s(binding.expression) + '<br>' +
                'argument: 参数'   + s(binding.arg) + '<br>' +
                'modifiers 修饰符: '  + s(binding.modifiers) + '<br>' ;
            }
        })

        Vue.directive('myColor',{
            inserted(el,binding){
                console.log(binding)
                el.style.color =  binding.value 
            }
        })

        // 绑定事件的指令 
        Vue.directive("myOn",{
            bind(el,binding){
                console.log(binding)
                el.addEventListener(binding.arg,binding.value,binding.modifiers.stop)
            }
        })
        const vm = new Vue({
            data:{
                title:"Vue 自定义指令",
                todo:'Vue is so easy?',
                color:"#0f0",
                show:true  
            },
            directives:{  // 局部注册指令  
                border:{
                    inserted(el){
                        el.style.border = "1px solid #000"
                    }
                }
            },
            methods:{
                todosome(){
                    console.log("todosome - 学好Vue ")
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")

        // v-shuibowen 
        // button 出现一个水波纹效果 
    </script>
    <!-- 
        Vue 也允许注册自定义指令   操作底层DOM  
        代码复用和抽象的主要形式是组件 (component 讲到这里再说) 

        v-on   v-if   v-show    v-for   v-model v-bind v-else v-once v-text v-html  
        指令目的   作用    操作底层DOM  

        指令 directive  
        v- 开头     驼峰命名 (单词之间  大写字母  变为小写字母 前面加 -  )  newColor   (W3C HTML 不准出现大写字母 )   

        全局定义  Vue.directive(name,{钩子函数})   Vue.filter
        局部定义  directives      filters 

        指令钩子函数   一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 )
        bind   指令第一次绑定到 元素时候调用     进行一些初始化操作   1 
        inserted  插入   被绑定元素插入父节点时调用  1
        update    更新  数据或者DOM节点 更新    n 
        unbind   只调用一次，指令与元素解绑时调用   1

        钩子函数 有几个参数 (el binding )
        el 绑定的DOM
        binding  指令携带的变量数据

        name 指令名
        value 指令的值  最重要  binding.value
        expression  指令对应的表达式 变量名称
        argument   指令的参数     v-on:click  click args   冒号声明的  
        modifiers   指令的修饰符   v-on.stop:click  stop 修饰符   

        v-slot   分发
        v-pre    
        v-cloak  锁住DOM  
      
     -->
</body>
</html>